﻿<Divider Orientation="DividerOrientation.Left">Presets</Divider>
<div class="tag-colorful-demo">
    <Tag Color="TagColor.Magenta">magenta</Tag>
    <Tag Color="TagColor.Pink">pink</Tag>
    <Tag Color="TagColor.Red">red</Tag>
    <Tag Color="TagColor.Volcano">volcano</Tag>
    <Tag Color="TagColor.Orange">orange</Tag>
    <Tag Color="TagColor.Green">green</Tag>
    <Tag Color="TagColor.Cyan">cyan</Tag>
    <Tag Color="TagColor.Blue">blue</Tag>
    <Tag Color="TagColor.Lime">lime</Tag>
    <Tag Color="TagColor.GeekBlue">geekblue</Tag>
    <Tag Color="TagColor.Purple">purple</Tag>
    <Tag Color="TagColor.Yellow">yellow</Tag>
    <Tag Color="TagColor.Gold">gold</Tag>
</div>
<Divider Orientation="DividerOrientation.Left">Inverse</Divider>    
<div class="tag-colorful-demo">
    <Tag Icon="taobao" Color="TagColor.BlueInverse">blue-inverse</Tag>
    <Tag Color="TagColor.OrangeInverse">orange-inverse</Tag>
    <Tag Icon="skype" Color="TagColor.RedInverse">red-inverse</Tag>
    <Tag Icon="weibo" Color="TagColor.PurpleInverse">purple-inverse</Tag>
</div>
<Divider Orientation="DividerOrientation.Left">Custom</Divider>    
<div class="tag-colorful-demo">
    <Tag Color="@("#f50")">#f50</Tag>
    <Tag Color="@("#2db7f5")">#2db7f5</Tag>
    <Tag Color="@("#87d068")">#87d068</Tag>
    <Tag Color="@("#108ee9")">#108ee9</Tag>
    <Tag Color="@("HotPink")">HotPink</Tag>
    <Tag Color="@("DarkRed")">DarkRed</Tag>
    <Tag Color="@("rgb(143, 201, 146)")">rgb(143, 201, 146)</Tag>
    <Tag Color="@("rgb(105, 58, 236)")">rgb(105, 58, 236)</Tag> 
</div>

<style>
	.tag-colorful-demo > * {
		margin-bottom: 12px;
		margin-right: 8px;
	}
</style>